const phoneBtn = document.getElementById('phone-btn')
const phoneInp = document.getElementById('phone-input')
const phoneBtnText = document.querySelector('.phone-btn-text')
const phoneBtnBorder = document.querySelector('.phone-btn-border')
const messageWrapper = document.querySelector('.message-wrapper')

///////////////////////////////////////////////////////////////////////

document.addEventListener('DOMContentLoaded', function () {
  var phoneInputs = document.querySelectorAll('input[data-tel-input]')

  var getInputNumbersValue = function (input) {
    // Return stripped input value — just numbers
    return input.value.replace(/\D/g, '')
  }

  var onPhonePaste = function (e) {
    var input = e.target,
      inputNumbersValue = getInputNumbersValue(input)
    var pasted = e.clipboardData || window.clipboardData
    if (pasted) {
      var pastedText = pasted.getData('Text')
      if (/\D/g.test(pastedText)) {
        // Attempt to paste non-numeric symbol — remove all non-numeric symbols,
        // formatting will be in onPhoneInput handler
        input.value = inputNumbersValue
        return
      }
    }
  }

  var onPhoneInput = function (e) {
    var input = e.target,
      inputNumbersValue = getInputNumbersValue(input),
      selectionStart = input.selectionStart,
      formattedInputValue = ''

    if (!inputNumbersValue) {
      return (input.value = '')
    }

    if (input.value.length != selectionStart) {
      // Editing in the middle of input, not last symbol
      if (e.data && /\D/g.test(e.data)) {
        // Attempt to input non-numeric symbol
        input.value = inputNumbersValue
      }
      return
    }

    if (
      ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(
        inputNumbersValue[0]
      ) > -1
    ) {
      if (inputNumbersValue[0] == '9')
        inputNumbersValue = '7' + inputNumbersValue
      var firstSymbols = inputNumbersValue[0] == '8' ? '+7' : '+7'
      formattedInputValue = input.value = firstSymbols + ' '
      if (inputNumbersValue.length > 1) {
        formattedInputValue += '(' + inputNumbersValue.substring(1, 4)
      }
      if (inputNumbersValue.length >= 5) {
        formattedInputValue += ') ' + inputNumbersValue.substring(4, 7)
      }
      if (inputNumbersValue.length >= 8) {
        formattedInputValue += '-' + inputNumbersValue.substring(7, 9)
      }
      if (inputNumbersValue.length >= 10) {
        formattedInputValue += '-' + inputNumbersValue.substring(9, 11)
      }
    } else {
      formattedInputValue = '+' + inputNumbersValue.substring(0, 16)
    }
    input.value = formattedInputValue
    if (phoneInp.value.length == 18) {
      phoneBtnText.classList.add('rainbow-text-1')
      phoneBtnBorder.classList.add('rainbow-border')
      phoneInp.style.backgroundColor = 'rgba(146, 255, 103, 0.5)'
      phoneBtnBorder.style.border = 'none'
      phoneBtn.disabled = false
    } else {
      phoneBtnText.classList.remove('rainbow-text-1')
      phoneBtnBorder.classList.remove('rainbow-border')
      phoneInp.style.backgroundColor = '#272727'
      phoneBtnBorder.style.border = '1px solid #fff'

      phoneBtn.disabled = true
    }
  }
  var onPhoneKeyDown = function (e) {
    // Clear input after remove last symbol
    var inputValue = e.target.value.replace(/\D/g, '')
    if (e.keyCode == 8 && inputValue.length == 1) {
      e.target.value = ''
    }
  }
  for (var phoneInput of phoneInputs) {
    phoneInput.addEventListener('keydown', onPhoneKeyDown)
    phoneInput.addEventListener('input', onPhoneInput, false)
    phoneInput.addEventListener('paste', onPhonePaste, false)
  }
})

const URL_API = `https://itroom.io`

phoneBtn.addEventListener('click', () => {
  const tel = phoneInp
  axios
    .post(URL_API, {
      phone: tel.value,
    })
    .then(() => {
      messageWrapper.style.display = 'flex'
      phoneInp.value = ''
      phoneInp.style.display = 'none'
      phoneBtnBorder.style.display = 'none'
    })
})

let center = [61.244401, 73.40984]

function init() {
  let map = new ymaps.Map('map', {
    center: center,
    zoom: 15,
  })

  let placemark = new ymaps.Placemark(
    center,
    {},
    {
      iconLayout: 'default#image',
      iconImageHref: './placemark.png',
      iconImageOffset: [-19, -44],
    }
  )

  map.controls.remove('geolocationControl') // удаляем геолокацию
  map.controls.remove('searchControl') // удаляем поиск
  map.controls.remove('trafficControl') // удаляем контроль трафика
  map.controls.remove('typeSelector') // удаляем тип
  // map.controls.remove('fullscreenControl') // удаляем кнопку перехода в полноэкранный режим
  map.controls.remove('zoomControl') // удаляем контрол зуммирования
  map.controls.remove('rulerControl') // удаляем контрол правил
  map.behaviors.disable(['scrollZoom']) // отключаем скролл карты (опционально)
  map.width = 100

  map.geoObjects.add(placemark)
}

ymaps.ready(init)
